html,
body {
	height: 100%;
	font-size: 14px;
	overflow: hidden;
}

/* ==HEADER== */
.headerBox {
	display: flex;
	justify-content: space-between;
	height: 52px;
	background: #3a3d42;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
	overflow: hidden;
}

.headerBox .logo {
	width: 14%;
	line-height: 52px;
	text-align: center;
	font-size: 18px;
	color: #FFF;
	letter-spacing: 3px;
}

.headerBox .baseBox {
	box-sizing: border-box;
	padding-right: 20px;
	width: 14%;
	line-height: 52px;
	text-align: right;
	font-size: 16px;
}

.headerBox .baseBox span,
.headerBox .baseBox a {
	margin: 0 5px;
	color: #FFF;
}

.headerBox .baseBox a {
	text-decoration: underline;
}

.headerBox .navBox {
	width: 56%;
	font-size: 0;
}

.headerBox .navBox a {
	box-sizing: border-box;
	display: inline-block;
	margin-right: 10px;
	padding: 0 15px;
	height: 52px;
	line-height: 52px;
	color: #CCC;
	font-size: 18px;
	border-bottom: 4px solid transparent;
	transition: border-bottom-color .3s;
}

.headerBox .navBox a:hover,
.headerBox .navBox a.active {
	color: #FFF;
	border-bottom-color: #33AAFF;
}

/* ==FOOTER== */
.footerBox {
	height: 35px;
	line-height: 35px;
	text-align: center;
	color: #FFF;
	background: #3a3d42;
}

.footerBox span {
	padding: 0 10px;
}

/* ==CONTAINER== */
.container {
	display: flex;
	overflow: hidden;
}

.iframeBox {
	width: 86%;
	height: 100%;
	border: none;
}

.menuBox {
	box-sizing: border-box;
	padding: 20px;
	width: 14%;
	height: 100%;
	background: #50545E;
	/* user-select: none; */
}

.menuBox .itemBox {
	margin-bottom: 10px;
	color: #FFF;
}

.menuBox .itemBox h3 {
	line-height: 35px;
	font-size: 18px;
	font-weight: normal;
	cursor: pointer;
}

.menuBox .itemBox h3 i {
	margin-right: 4px;
}

.menuBox .itemBox .item {
	padding-left: 25px;
}

.menuBox .itemBox .item a {
	display: block;
	line-height: 35px;
	color: #CCC;
	font-size: 16px;
}
/* .menuBox .itemBox .item a:hover{
	color:lightblue;
}
.menuBox .itemBox .item .active{
	color:lightblue;
} */